<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1、AngularJS简介</title>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!----------------------------------------1、AngularJS 扩展了 HTML----------------------------------------------->
<!--
注意：
A、主要不要写描述文字
B、只能出现一个ng-app
-->
<!--<div ng-app>-->
    <!--<p>名字 : <input type="text" ng-model="name"></p>-->

    <!--<h1>Hello {{name}}</h1>-->
<!--</div>-->

<!--
ng-app  指令    body里面的内容是AngularJS应用程序的所有者
ng-model  指令   把输入域的值绑定到应用程序变量name。 html -> 应用程序
ng-bind 指令     把应用程序变量 name 绑定到某个段落的 innerHTML  应用程序-> html
ng-controller   指明了控制器。
-->

<!----------------------------------------2、AngularJS 指令----------------------------------------------->
<!-- data- H5要求-->

<!--<div data-ng-app=""  data-ng-init="name ='刘子彬'">-->
    <!--<p>设置名字是<span data-ng-bind="name"></span></p>-->
<!--</div>-->


<!----------------------------------------3、AngularJS 表达式----------------------------------------------->
<div>
    <p>----------------------------------------3、AngularJS 表达式-----------------------------------------------</p>
    <p>A、AngularJS 表达式写在双大括号内：{{ expression }}</p>
    <p> B、AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。</p>
    <p> C、AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量</p>
</div>

<!----------------------------------------4、AngularJS 应用----------------------------------------------->
<div ng-app="myApp" ng-controller="myController" ng-init="dog = {name:'小花',age:'23'}">

    <p>名:<input type="text" ng-model="firstName"></p>
    <p>姓:<input type="text" ng-model="lastName"></p>
    <!--<p>您输入的姓名是：{{lastName + firstName}}</p>-->
    <p>您输入的姓名是：<span ng-bind="lastName + firstName + '的狗狗名字叫做：' + dog.name"></span></p>

</div>

<script>

    //获取创建的应用程序
     var  app = angular.module('myApp',[]);

     //注册控制器
     app.controller('myController',function ($scope) {
         $scope.firstName = '初始名字';
         $scope.lastName = '';  //设置初始值
         console.log($scope);
     });

</script>

</body>
</html>
